// 导入node.js里面专门用来操作路径的模块
const path=require('path')

// 1.导入html-webpack-plugin这个插件，得到插件的构造函数
const HtmlPlugin=require('html-webpack-plugin');
// 2.new 构造函数，创建插件的实例对象
const htmlPlugin=new HtmlPlugin({
    // 指定要复制那个页面
    template:'./src/index.html',
    // 指定复制出来的文件名和存放路径
    filename:'./index.html'
})

// 2.按需要导入插件，得到插件的构造函数之后，创建插件的实例对象
const {CleanWebpackPlugin}=require('clean-webpack-plugin')
const cleanPlugin=new CleanWebpackPlugin();

// module.exports表示项目导出一个配置文件
module.exports={
    // 1.mode用来指定构建模式，可选值有development和production
    mode:'development',

    // 2.entry,output用于指定打包的入口和出口
    // entry:指定要处理那个文件
    entry:path.join(__dirname,'./src/index.js'),
    // output:指定生成的文件要存放到哪里
    output:{
        // 存放的目录
        path:path.join(__dirname,'dist'),
        // 生成的文件名
        // 明确告诉webpack把生成的bundle.js文件存放到dist目录下的js子目录中
        filename:'js/bundle.js',
    },

    // 3.插件的数组，将来webpack在运行时，会加载并调用这些插件
    plugins:[htmlPlugin,cleanPlugin],//通过plugins节点，使htmlPlugin插件生效

    devServer:{
        // 首次打包成功后，自动打开浏览器
        // open:true,
        // 在http协议中，如果端口号是8083，则可以被省略
        port:8084,
        // 指定运行的主机地址
        host:'127.0.0.1'
    },

    // 4.所有第三方文件模块的匹配规则
    module:{
        rules:[
            // 文件后缀名的匹配规则
            // test表示匹配的文件类型，use表示对应要调用的loader,use数组中指定的loader顺序是固定的，多个loader的调用顺序是：从后往前调
            // /\表示进行转义，$表示后缀名是css
            {test:/\.css$/,use:['style-loader','css-loader']},
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']},
            {test:/\.jpg|png|gif$/,use:'url-loader?limit=470&outputPath=images'},//22229用于区分图片的大小,是否将图片转换为base64的格式进行转换
            {test:/\.js$/,use:'babel-loader',exclude:/node_modules/},//exclude表示排除项，排除了这个包里面的代码的兼容性
        ]
    },

    // @定义
    resolve:{
        alias:{
            // 告诉webpack,程序员写的代码中，@符号表示src这一层目录
            '@':path.join(__dirname,'./src/')
        }
    }
}
